<template>
  <div class="registration">
    <div style="float: right; margin-top: 10px; margin-right: 20px">
      <!-- 新增 -->
      <el-button
        type="primary"
        size="small"
        @click="dialogFormVisible = true"
        style="margin-right: 10px"
      >
        <el-icon><Plus /></el-icon>
        <span>新增</span>
      </el-button>
      <el-button type="primary" size="small" @click="handleDelete">
        <el-icon><Delete /></el-icon>
        <span>删除</span>
      </el-button>
      <el-button type="primary" size="small" @click="exportFile">
        <el-icon><FolderOpened /></el-icon>
        <span>导出</span>
      </el-button>
      <el-button type="primary" size="small" @click="handlePrint">
        <el-icon><Printer /></el-icon>
        <span>打印</span>
      </el-button>
    </div>
    <div class="inquire">
      <span>出库类型</span>
      <el-input
        v-model="input1"
        class="w-50 m-2"
        size="small"
        style="width: 150px; height: 20px"
      />
      <span>出库单号</span>
      <el-input
        v-model="input2"
        class="w-50 m-2"
        size="small"
        style="width: 150px; height: 20px"
      />
      <span>出库日期</span>
      <el-date-picker
        v-model="value"
        type="daterange"
        size="small"
        start-placeholder="Start date"
        end-placeholder="End date"
      />
      <el-button type="primary" size="small" @click="handlinquire"
        >查询</el-button
      >
    </div>
    <div class="box">
      <!-- 查询 -->
    </div>
  </div>
  <!-- 表格 -->
  <div class="main">
    <el-table ref="multipleTableRef" :data="tableshuju" style="width: 100%">
      <el-table-column type="selection" ref="checked" />
      <el-table-column
        property="retirementDate"
        label="报废日期"
        show-overflow-tooltip
      />
      <el-table-column
        property="storeName"
        label="仓库名称"
        show-overflow-tooltip
      />
      <el-table-column
        property="materialNumber"
        label="编码"
        show-overflow-tooltip
      />
      <el-table-column
        property="materialName"
        label="名称"
        show-overflow-tooltip
      />
      <el-table-column
        property="materialSpelling"
        label="简拼码"
        show-overflow-tooltip
      />
      <el-table-column
        property="materialClass"
        label="类别"
        show-overflow-tooltip
      />
      <el-table-column
        property="materialSpecificationModel"
        label="规格型号"
        show-overflow-tooltip
      />
      <el-table-column
        property="materialUnit"
        label="单位"
        show-overflow-tooltip
      />
      <el-table-column
        property="materialWorth"
        label="价值"
        show-overflow-tooltip
      />
      <el-table-column
        property="scrapQuantity"
        label="报废数量"
        show-overflow-tooltip
      />
      <el-table-column
        property="causeOfAbandonment"
        label="报废原因"
        show-overflow-tooltip
      />
      <el-table-column
        property="operator"
        label="经办人"
        show-overflow-tooltip
      />
      <el-table-column property="remarks" label="备注" show-overflow-tooltip />

      <!-- 左侧操作按钮 -->
      <el-table-column fixed="left" label="操作" width="170px">
        <template #default="scope">
          <el-button type="danger" @click="handleRemove(scope.row)"
            >删除</el-button
          >
          <el-button type="primary" @click="handleModify(scope.row)"
            >修改</el-button
          >
          <el-button type="primary" @click="handleView(scope.row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 分页 -->
  <div class="foot">
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      layout="total,prev, pager, next, jumper"
      :total="total"
    />
  </div>
  <!-- 新增 -->
  <el-dialog
    v-model="dialogFormVisible"
    title="出库新增"
    width="30%"
    center
    :before-close="handleClose"
  >
    <el-form :model="form" class="el-form">
      <el-form-item label="报废日期" required>
        <el-input v-model="form.retirementDate" />
      </el-form-item>
      <el-form-item label="仓库名称" required>
        <el-input v-model="form.storeName" />
      </el-form-item>
      <el-form-item label="编码" required>
        <el-input v-model="form.materialNumber" />
      </el-form-item>
      <el-form-item label="名称" required>
        <el-input v-model="form.materialName" />
      </el-form-item>
      <el-form-item label="简拼码" required>
        <el-input v-model="form.materialSpelling" />
      </el-form-item>
      <el-form-item label="类别" required>
        <el-input v-model="form.materialClass" />
      </el-form-item>
      <el-form-item label="规格型号" required>
        <el-input v-model="form.materialSpecificationModel" />
      </el-form-item>
      <el-form-item label="单位" required>
        <el-input v-model="form.materialUnit" />
      </el-form-item>
      <el-form-item label="价值" required>
        <el-input v-model="form.materialWorth" />
      </el-form-item>
      <el-form-item label="报废数量" required>
        <el-input v-model="form.scrapQuantity" />
      </el-form-item>
      <el-form-item label="报废原因" required>
        <el-input v-model="form.causeOfAbandonment" />
      </el-form-item>
      <el-form-item label="经办人" required>
        <el-input v-model="form.operator" />
      </el-form-item>
      <el-form-item label="备注" required>
        <el-input v-model="form.remarks" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="submitAndExit"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 报废登记-查看 -->
  <el-dialog
    v-model="tableDialogTableVisible"
    title="报废登记-查看"
    width="90%"
    align-center
  >
    <el-table :data="gridData">
      <el-table-column property="retirementDate" label="报废日期" />
      <el-table-column property="storeName" label="仓库名称" />
      <el-table-column property="materialNumber" label="编码" />
      <el-table-column property="materialName" label="名称" />
      <el-table-column property="materialSpelling" label="简拼码" />
      <el-table-column property="materialClass" label="类别" />
      <el-table-column property="materialSpecificationModel" label="规格型号" />
      <el-table-column property="materialUnit" label="单位" />
      <el-table-column property="materialWorth" label="价值" />
      <el-table-column property="scrapQuantity" label="报废数量" />
      <el-table-column property="causeOfAbandonment" label="报废原因" />
      <el-table-column property="operator" label="经办人" />
      <el-table-column property="remarks" label="备注" />
    </el-table>
  </el-dialog>

  <!-- 修改 -->
  <el-dialog
    v-model="modifyDialogTableVisible"
    title="报废修改"
    width="30%"
    center
    :before-close="handleClose"
  >
    <el-form :model="form" class="el-form">
      <el-form-item label="报废日期" required>
        <el-input v-model="form.retirementDate" />
      </el-form-item>
      <el-form-item label="仓库名称" required>
        <el-input v-model="form.storeName" />
      </el-form-item>
      <el-form-item label="编码" required>
        <el-input v-model="form.materialNumber" />
      </el-form-item>
      <el-form-item label="名称" required>
        <el-input v-model="form.materialName" />
      </el-form-item>
      <el-form-item label="简拼码" required>
        <el-input v-model="form.materialSpelling" />
      </el-form-item>
      <el-form-item label="类别" required>
        <el-input v-model="form.materialClass" />
      </el-form-item>
      <el-form-item label="规格型号" required>
        <el-input v-model="form.materialSpecificationModel" />
      </el-form-item>
      <el-form-item label="单位" required>
        <el-input v-model="form.materialUnit" />
      </el-form-item>
      <el-form-item label="价值" required>
        <el-input v-model="form.materialWorth" />
      </el-form-item>
      <el-form-item label="报废数量" required>
        <el-input v-model="form.scrapQuantity" />
      </el-form-item>
      <el-form-item label="报废原因" required>
        <el-input v-model="form.causeOfAbandonment" />
      </el-form-item>
      <el-form-item label="经办人" required>
        <el-input v-model="form.operator" />
      </el-form-item>
      <el-form-item label="备注" required>
        <el-input v-model="form.remarks" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="andExit"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import {
  getMaterialInfo,
  addMaterialInfo,
  setMaterialInfo,
  dletematerialall,
} from '@/api/getapi'
import { ElMessageBox, ElMessage } from 'element-plus'
let tableDialogTableVisible = ref(false)
let modifyDialogTableVisible = ref(false)
// 新增
const form = ref<any>({
  retirementDate: '',
  storeName: '',
  materialNumber: '',
  materialName: '',
  materialSpelling: '',
  materialClass: '',
  materialSpecificationModel: '',
  materialUnit: '',
  materialWorth: '',
  scrapQuantity: '',
  causeOfAbandonment: '',
  operator: '',
  remarks: '',
})
const dialogFormVisible = ref(false)
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('确认关闭吗？关闭后无法保存信息！').then(() => {
    done()
  })
}
// 新增提交
const submitAndExit = async () => {
  try {
    const forData = form.value
    console.log('fordata', forData)
    const result = await addMaterialInfo(forData)
    console.log('添加', result)
    form.value = {}
    dialogFormVisible.value = false
    ElMessage({
      message: '添加成功',
      type: 'success',
      duration: 1500,
    })
  } catch (error) {
    ElMessage({
      message: '出库单号重复',
      type: 'error',
      duration: 1500,
      showClose: true,
    })
  }
  getData()
}
// 导出
import { utils, writeFileXLSX } from 'xlsx'

//删除
const multipleTableRef = ref<any>()
const handleDelete = async () => {
  try {
    const data: any = multipleTableRef.value.getSelectionRows()
    console.log(data)
    const result = await dletematerialall(data)
    tableshuju.value = result
    ElMessage({
      message: '删除成功',
      type: 'success',
      duration: 1500,
    })
  } catch (error) {
    console.log(error)
  }
}
//导出
function exportFile() {
  const data = multipleTableRef.value.getSelectionRows()
  // console.log('选中数据:', data)

  const ws = utils.json_to_sheet(data)
  const wb = utils.book_new()
  utils.book_append_sheet(wb, ws, '项目信息')
  writeFileXLSX(wb, 'SheetJSVueAoO.xlsx')
}
//打印
const handlePrint = () => {
  console.log(222)
}

//表格
let tableshuju = ref<any[]>([])
const tableData = ref<any>()
const getData = async () => {
  const result: any = await getMaterialInfo()
  console.log(result)
  tableData.value = result
  total.value = tableData.value.length
  show()
}
getData()
//表格修改数据
// const dialogVisible = ref(false)
const handleModify = async (prod: any) => {
  modifyDialogTableVisible.value = true
  form.value = prod
}
//修改提交
const andExit = async () => {
  const result = await setMaterialInfo(form.value)
  modifyDialogTableVisible.value = false
  console.log(result)
  ElMessage({
    message: '修改成功',
    type: 'success',
    duration: 1500,
  })

  getData()
}
//表格删除数据
import { deleteMaterialInfo } from '../../api/getapi'
const handleRemove = async (prod: any) => {
  try {
    const result = await deleteMaterialInfo(prod)
    tableshuju.value = result
    ElMessage({
      message: '删除成功',
      type: 'success',
      duration: 1500,
    })
  } catch (error) {
    console.log(error)
  }
}
//表格查看数据
const gridData = ref<any>([])
const handleView = (result: any) => {
  tableDialogTableVisible.value = true
  const arr = []
  arr.push(result)
  gridData.value = arr
}
//分页器
// const registerInfo = ref<ProjectInfo[]>([])
const total = ref()
//分页器数据
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const show = () => {
  tableshuju.value = tableData.value.slice(
    pageSize4.value * (currentPage4.value - 1),
    pageSize4.value * currentPage4.value,
  )
}
watch([currentPage4, pageSize4], (val) => {
  console.log('val', val)
  show()
})

//搜索框
const input1 = ref('')
const value = ref('')
const input2 = ref('')
const handlinquire = () => {
  let obj: any = {}
  obj = {
    outboundType: input1.value,
    theInvoiceNumber: input2.value,
  }

  console.log(obj)

  // 排除空
  for (let key in obj) {
    if (obj[key] == '' || obj[key] == null) {
      delete obj[key]
    }
  }
  let filter = (condition: any, data: any) => {
    return data.filter((item: any) => {
      return Object.keys(condition).every((key) => {
        return String(item[key]).includes(String(condition[key]).trim())
      })
    })
  }
  tableshuju.value = filter(obj, tableData.value)
  if (value.value) {
    console.log(value.value)
    tableshuju.value = tableData.value.filter(
      (item: { outboundDeliveryDate: string | number | Date }) => {
        return (
          new Date(item.outboundDeliveryDate).getTime() >
            new Date(value.value[0]).getTime() &&
          new Date(item.outboundDeliveryDate).getTime() <
            new Date(value.value[1]).getTime()
        )
      },
    )
  }
  if (tableshuju.value.length == 0) {
    ElMessage({
      type: 'error',
      message: '没有相关信息',
    })
  }
}
</script>

<style lang="less" scoped>
.demo-date-picker {
  display: flex;
  padding: 0;
  width: 300px;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.inquire {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 0;
  width: 1000px;
  height: 28px;

  span {
    font-size: 15px;
  }

  .w-50 {
    width: 200px;
  }

  el-button {
    vertical-align: middle;
  }
}

.main {
  margin: auto;
  width: 98%;
  // height: 100%;
  border: 1px solid #ccc;

  .el-button {
    width: 40px;
    height: 13px;
  }
}

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

.foot {
  position: fixed;
  right: 50px;
  bottom: 0;
  z-index: 1;
  margin: auto;
  background-color: #fff;
}

.el-button--text {
  margin-right: 15px;
}

.el-input {
  width: 100%;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

.header {
  display: flex;
  justify-content: space-evenly;
  margin-right: 15px;
}

.box {
  display: flex;
  justify-content: space-between;
}
</style>
